<template>
	<pager ref="pager" @loadData="loadData" navbar :height="`calc(100vh - ${tabbarHeight}rpx - ${safeAreaHeight}px);`"
		@onPaddingTop="onPaddingTop">
		<template #navbar>
			<view class="navbar">
				<image class="banner" mode="widthFix" :src="$assets.img('/static/images/banner2.png')"></image>
				<view class="title">
					<u-navbar :borderBottom="false" titleColor="#4A4848" :background="{
							background: '#00000000'
						}" :isBack="false" title="首页"></u-navbar>
				</view>
			</view>
		</template>

		<view class="content bg-white" :style="[
				{
					minHeight: `calc(100vh - ${paddingTop}px - ${tabbarHeight}rpx - ${safeAreaHeight}px)`
				}
			]">
			<!-- 通知栏 -->
			<notice-bar ref="noticeBar"></notice-bar>

			<view class="box1 flex flex-row align-s justify-s flex-wrap">
				<view v-if="isShowStoreMenu" class="mbtn">
					<view @click="goStore" class="mview flex flex-col"
						style="background: linear-gradient(222deg, #f1fffc 0%, #d2f1ff 100%);">
						<image class="icon1" mode="widthFix" :src="$assets.img('/static/images/icon003.png')"></image>
						<view class="txt1">门店管理</view>
						<view class="txt2">门店信息明细</view>
					</view>
				</view>
				<view class="mbtn">
					<view @click="goLanded" class="mview flex flex-col"
						style="background: linear-gradient(47deg, #FFECD5 0%, #FFFBE6 100%);">
						<image class="icon1" mode="widthFix" :src="$assets.img('/static/images/icon002.png')"></image>
						<view class="txt1">落地方查询</view>
						<view class="txt2">落地方订单明细</view>
					</view>
				</view>
				<view class="mbtn">
					<view @click="goMonthBill" class="mview flex flex-col"
						style="background: linear-gradient(47deg, #FFDFD8 0%, #FFFCF0 100%);">
						<image class="icon1" mode="widthFix" :src="$assets.img('/static/images/icon001.png')"></image>
						<view class="txt1">月账单管理</view>
						<view class="txt2">每月转账明细</view>
					</view>
				</view>
			</view>

			<view class="w100" style="height: 60rpx;"></view>
		</view>
	</pager>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import NoticeBar from './notice-bar.vue';

	export default {
		props: {
			tabbarHeight: {
				type: Number,
				default: 0
			}
		},
		components: {
			NoticeBar
		},
		data() {
			return {
				safeAreaHeight: 0,
				paddingTop: 0
			};
		},
		computed: {
			...mapState({
				userInfo: ({
					app
				}) => app.userInfo
			}),

			isShowStoreMenu() {
				const vm = this;

				if (!vm.userInfo || !vm.userInfo.accessInfo || !vm.userInfo.accessInfo.viewStore || vm.userInfo.accessInfo
					.viewStore == 101) {
					return false;
				}

				return true;
			},
		},
		created() {
			const vm = this;
			vm.safeAreaHeight = uni.getSystemInfoSync().safeAreaInsets.bottom;
		},
		methods: {
			refresh() {
				const vm = this;

				if (vm.$refs.noticeBar) {
					vm.$refs.noticeBar.refresh();
				}
			},
			loadData() {
				const vm = this;

				vm.$refs.pager.finish();
			},
			onPaddingTop(paddingTop) {
				const vm = this;
				vm.paddingTop = paddingTop;
			},
			goStore() {
				const vm = this;

				if (!vm.$utils.isLogined()) {
					return;
				}

				if (!vm.userInfo.accessInfo || !vm.userInfo.accessInfo.viewStore || vm.userInfo.accessInfo.viewStore ==
					101) {
					vm.$utils.showToast('抱歉，您没有门店管理权限！');
					return;
				}

				if (vm.userInfo.accessInfo.viewStore == 201) {
					if (!vm.userInfo.singleStore || !vm.userInfo.singleStore.id || !vm.userInfo.singleStore.name) {
						vm.$utils.showToast('抱歉，您没有绑定具体门店！');
						return;
					}
					if (vm.userInfo.singleStore.isInited == 1) {
						vm.$utils.openPage(
							`/pkgStore/pages/index/index?storeId=${vm.userInfo.singleStore.id}&storeName=${vm.userInfo.singleStore.name}`
							);
					} else {
						vm.$utils.openPage(
							`/pkgStore/pages/setting/step1?storeId=${vm.userInfo.singleStore.id}&storeName=${vm.userInfo.singleStore.name}`
							);
					}
				} else if (vm.userInfo.accessInfo.viewStore == 301) {
					vm.$utils.openPage('/pkgStore/pages/landed-list/index');
				}
			},
			goLanded() {
				const vm = this;

				if (!vm.$utils.isLogined()) {
					return;
				}

				if (!vm.userInfo.accessInfo || !vm.userInfo.accessInfo.viewLanded || vm.userInfo.accessInfo.viewLanded ==
					101) {
					vm.$utils.showToast('抱歉，您没有落地方查询权限！');
					return;
				}

				vm.$utils.openPage('/pkgLanded/pages/index/index');
			},
			goMonthBill() {
				const vm = this;

				if (!vm.$utils.isLogined()) {
					return;
				}

				if (!vm.userInfo.accessInfo || !vm.userInfo.accessInfo.viewMonthBill || vm.userInfo.accessInfo
					.viewMonthBill == 101) {
					vm.$utils.showToast('抱歉，您没有月账单管理权限！');
					return;
				}

				if (vm.userInfo.accessInfo.viewMonthBill == 201) {
					if (!vm.userInfo.singleLanded || !vm.userInfo.singleLanded.id || !vm.userInfo.singleLanded.name) {
						vm.$utils.showToast('抱歉，您没有绑定具体落地方！');
						return;
					}
					vm.$utils.openPage(
						`/pkgMonthBill/pages/billlist/index?landedId=${vm.userInfo.singleLanded.id}&landedName=${vm.userInfo.singleLanded.name}`
						);
				} else if (vm.userInfo.accessInfo.viewMonthBill == 301) {
					vm.$utils.openPage('/pkgMonthBill/pages/index/index');
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.navbar {
		background: #ffffff;

		.banner {
			width: 100%;
			height: 446rpx;
			display: block;
		}

		.title {
			position: absolute;
			top: 0;
		}
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;

		.box1 {
			padding: 15rpx 15rpx;

			.mbtn {
				padding: 15rpx;
				position: relative;
				width: calc(100% / 2);

				.mview {
					position: relative;
					border-radius: 16rpx;
					height: 188rpx;
					width: 100%;
					padding: 18rpx;
					overflow: hidden;

					.icon1 {
						position: absolute;
						bottom: -10rpx;
						right: -20rpx;
						display: block;
						width: 178rpx;
						height: 182rpx;
					}

					.txt1 {
						font-size: 30rpx;
						font-weight: bold;
						color: #353535;
						line-height: 42rpx;
					}

					.txt2 {
						font-size: 22rpx;
						color: #858585;
						line-height: 32rpx;
						margin-top: 4rpx;
					}
				}

				.mview:active {
					opacity: 0.7;
				}
			}
		}
	}
</style>